<template>
  <el-dialog v-model="dialogFormVisible" title="修改活动信息">
    <el-form
      ref="ruleFormRef"
      :model="activityFrom"
      :label-width="formLabelWidth"
      size="large"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="活动编码" prop="activity_id">
            <el-input disabled v-model="activityFrom.activity_id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="开始结束时间" prop="date">
            <el-date-picker
              v-model="activityFrom.date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动名称" prop="activity_name">
            <el-input v-model="activityFrom.activity_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类别" prop="activity_category">
            <el-select
              v-model="activityFrom.activity_category"
              style="width: 100%"
            >
              <el-option
                v-for="c in categoryList"
                :key="c.activity_categoryId"
                :label="c.activity_categoryName"
                :value="c.activity_categoryId"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>

        <el-col :span="12">
          <el-form-item label="备注">
            <el-input
              v-model="activityFrom.activity_remarks"
              :rows="3"
              type="textarea"
              placeholder="Please input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="activityFrom.activity_state" class="ml-4">
              <el-radio label="1" size="large">开启</el-radio>
              <el-radio label="2" size="large">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { reqGetCategoryList, reqUpdateActivity } from '@/api/activity'
import { ElMessage } from 'element-plus'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const activityFrom = reactive({
  activity_category: 0,
  date: [],
  activity_id: 0,
  activity_name: '',
  activity_remarks: '',
  activity_state: '1',
  activity_status: 1
})
const changeDialogFormVisible = () => {
  dialogFormVisible.value = !dialogFormVisible.value
}
defineExpose({
  changeDialogFormVisible
})

// 获取vuex中的activity
const store = useStore()
const { dispatch, getters, commit } = store
const activity = computed(() => getters.activity)
watch(activity, (newValue, oldValue) => {
  for (const key in newValue) {
    if (Object.hasOwnProperty.call(newValue, key)) {
      activityFrom[key] = newValue[key]
    }
  }
  activityFrom.date = [newValue.activity_startTime, newValue.activity_endTime]
})
const categoryList = computed(() => getters.categoryList)
const getCategoryList = async () => {
  const result = await reqGetCategoryList({ currentPage: 1, pageSize: 500 })
  if (result.code === 200) {
    commit('activity/GETCATEGORYLIST', result.data.data)
  }
}
getCategoryList()

// 表单校验
const ruleFormRef = ref()
const rules = reactive({
  activity_id: [
    { required: true, message: '活动编码不能为空', trigger: 'blur' }
  ],
  activity_name: [
    { required: true, message: '活动名称不能为空', trigger: 'blur' }
  ],
  activity_category: [
    { required: true, message: '类别不能为空', trigger: 'blur' }
  ],
  date: [{ required: true, message: '时间不能为空', trigger: 'blur' }]
})
const pagination = computed(() => getters.activityPagination)
// 确定按钮
const submit = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const activity = {
        activity_category: 0,
        activity_endTime: 0,
        activity_id: 0,
        activity_name: '',
        activity_remarks: '',
        activity_startTime: 0,
        activity_state: '',
        activity_status: 1
      }
      for (const key in activityFrom) {
        if (key !== 'date') {
          if (Object.hasOwnProperty.call(activityFrom, key)) {
            activity[key] = activityFrom[key]
          }
        }
      }
      activity.activity_startTime = activityFrom.date[0]
      activity.activity_endTime = activityFrom.date[1]
      const result = await reqUpdateActivity(activity)
      if (result.code === 200 && result.data === 1) {
        ElMessage({
          message: result.msg,
          type: 'success'
        })
        dispatch('activity/getActivityList', { pagination })
        changeDialogFormVisible()
      } else {
        ElMessage({
          message: result.msg,
          type: 'warning'
        })
      }
    } else {
      return false
    }
  })
}
</script>
